<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>管理用户账号页面</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .table-responsive {
            width: 100%;
        }
    </style>
  </head>
  <body>
    <div class="table-responsive">
      <div id="allusers">
        <table class="table">
          <h3 style="text-align:center;">账号管理列表</h3>

          <tr>
            <th>用户名</th>
            <th>昵称</th>
            <th>状态</th>
            <th>操作</th>
          </tr>


          <tr v-for="(user,i) in users">
            <td>
              <a href="">{{user.username}}</a>
            </td>
            <td>{{user.nickname}}</td>
            <td v-text="user.locked==0?'正常':'已锁定'"></td>
            <td>
              <a @click="lockUser(user.id,i)">封号</a>
              <a @click="unLockUser(user.id,i)">解封</a>
              <a @click="deleteUser(user.id,i)">删号</a>
            </td>
          </tr>

        </table>
      </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入axios框架-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script>
        let user_vm = new Vue({
            el: "#allusers",
            data: {
                users: []
            },
            methods: {
                loadusers: function () {
                    axios({
                        url: "/boke/admin/showAllUsers",
                        method: "get"
                    }).then(function (r) {
                        console.log(r.data)
                        user_vm.users = r.data;
                    })
                },

                lockUser: function (id, i) {
                    console.log(id)
                    if (user_vm.users[i].locked == 1) {
                        return;
                    }
                    axios({
                        url: "/boke/admin/showAllUsers/lock/" + id,
                        method: "get"
                    }).then(function (r) {
                        console.log(r.data);
                        if (r.data > 0) {
                            user_vm.users[i].locked = 1;
                        } else {
                            alert("封号失败");
                        }
                    })
                },

                unLockUser: function (id, i) {
                    console.log(id)
                    if (user_vm.users[i].locked == 0) {
                        return;
                    }
                    axios({
                        url: "/boke/admin/showAllUsers/unLock/" + id,
                        method: "get"
                    }).then(function (r) {
                        console.log(r.data);
                        if (r.data > 0) {
                            user_vm.users[i].locked = 0;
                        } else {
                            alert("解封失败");
                        }
                    })
                },

                deleteUser: function (id, i) {
                    console.log(id)
                    axios({
                        url: "/boke/admin/showAllUsers/delete/" + id,
                        method: "get"
                    }).then(function (r) {
                        console.log(r.data);
                        if (r.data > 0) {
                            user_vm.users.splice(i, 1)
                        } else {
                            alert("删除失败");
                        }
                    })
                }
            },

            created: function () {
                this.loadusers();
            }
        })
    </script>
  </body>
</html>